<!--  -->
<template>
  <div>
    <!-- 图片上传，可传递参数有 files one disabled
      @param {String} v-mode - 展示图片数据
      @param {Boolean} one - 是否上传一张图片，默认false
      @param {Boolean} disabled - 是否为上传图片的展示（不理会是否存在one），默认false
      @return {String} success - 返回处理后的字符串逗号拼接路径
     -->
    <upload v-model="files" one @success="uploadSuccess" />

    <el-button @click="show=true">弹框展示</el-button>
    <!-- 内容弹框
      @param {Boolean} v-mode - 弹框是否展示
      @param {String} title - 头部信息，不填隐藏头部信息
      @param {Boolean} footer - 是否展示fotter，默认true
      @param {Boolean} clickModal - 是否点击遮罩层关闭，默认true
      @param {String} sureText - 确认按钮文字
      @param {String} cancelText - 取消按钮文字，为空时隐藏按钮<cancelText="">
      @param {Function} sureFn - 确认按钮函数
     -->
    <content-dialog v-model="show" :sureFn="submit">
      <div style="width:800px">
        <div v-for="item in 200" :key="item">{{item}}</div>
      </div>
    </content-dialog>

    <card>
      <!-- 搜索区域及内容
      搜索区域必须为form，并且添加inline属性，slot="header"具名插槽
     -->
      <!-- <el-form inline :model="listQuery" slot="header">
          <el-form-item label="审批人：">
            <el-input v-model="listQuery.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域：">
            <el-select v-model="listQuery.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form> -->

      <!-- 引入组件TimeChange，组件为form表单，集成插槽
      card组件中添加slot="header"具名插槽
      绑定ref属性，通过this.$refs[ref_name].getTime()，获取时间 -->
      <time-change ref="time" slot="header">
        <el-form-item label="审批人：">
          <el-input v-model="listQuery.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域：">
          <el-select v-model="listQuery.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </time-change>

      <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="search" />
    </card>

    <!-- 富文本编辑器 -->
    {{content}}
    <card>
      <tinymce v-model="content" />
    </card>
  </div>
</template>

<script>
import Upload from '@/components/Upload/index.vue'
import ContentDialog from '@/components/ContentDialog/index.vue'
import Card from '@/components/Card/index.vue'
import TimeChange from '@/components/TimeChange'
import Pagination from "@/components/Pagination";
import Tinymce from '@/components/Tinymce'
import { reactive, ref } from '@vue/composition-api'

// 图片上传
function imageUpload() {
  const files = ref('')

  setTimeout(() => {
    files.value = 'http://img.ldjwl.com/images/20210308/c0930b14d46744e1abf1c79207c46dc0.jpg'
  }, 3000)

  function uploadSuccess(data) {
    log(data, files.value)
  }

  return {
    files,
    uploadSuccess
  }
}

// 弹框展示
function dialog() {
  const show = ref(false)

  function submit(cb) {
    setTimeout(() => {
      cb('请求完成', 'success')
    }, 5000)
  }
  return {
    show,
    submit
  }
}

// Card
function card(refs) {
  const total = ref(100)
  const listQuery = reactive({
    page: 1,
    limit: 10,
  })

  const tableData = ref([{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }])

  function search() {
    log(refs.time.getTime())
  }
  return {
    total,
    listQuery,
    tableData,
    search
  }
}

export default {
  components: {
    Upload,
    ContentDialog,
    Card,
    TimeChange,
    Pagination,
    Tinymce
  },
  name: 'dashboard',
  setup(props, { refs }) {
    return {
      ...imageUpload(),
      ...dialog(),
      ...card(refs),
      content: ref(''),
    }
  },
}

</script>

<style scoped>
</style>